<template>
  <div class="pre-archive-detail">
    <el-dialog width="900px" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-ziliao"></i>
        <span>{{title}}</span>
      </span>
      <div class="WhiteScroll over-box-css">
        <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules" style="position: relative">

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="标段名称：" prop="name" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.name" placeholder="标段名称" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="标段号：" prop="code" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.code" :change="check_num()" placeholder="标段号" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="form-append" label="长度：" prop="sectionLength" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.sectionLength" placeholder="" oninput="value=value.replace(/[^-\d.]/g,'')" :disabled="detailType === 'check'">
                  <template slot="append">KM</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="工程地点：" prop="projectSite" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.projectSite" placeholder :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结构类型：" prop="structureType" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.structureType" placeholder :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="开工日期：" prop="startTime" :label-width="formlabelWidth">
                <el-date-picker style="width:100%;" v-model="formBaseData.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :disabled="detailType === 'check'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="竣工日期：" prop="endTime" :label-width="formlabelWidth">
                <el-date-picker style="width:100%;" v-model="formBaseData.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :disabled="detailType === 'check'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">

            <!--
            <el-col :span="12">
              <el-form-item label="施工单位：" prop="buildUnitUsers" :label-width="formlabelWidth">
                <el-cascader :options="buildList" :props="cascaderProps" clearable
                             v-model="formBaseData.buildUnitUsers" disabled
                             style="width:310px" @change="buildUnitUsersChange" ref="buildCascader"></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="监理单位：" prop="supervisorUnitUsers" :label-width="formlabelWidth">
                <el-cascader :options="supervisorList" :props="cascaderProps" clearable
                             v-model="formBaseData.supervisorUnitUsers" disabled
                             style="width:310px" @change="supervisorUsersChange" ref="supervisorCascader"></el-cascader>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="造价咨询单位：" prop="costUnitUsers" :label-width="formlabelWidth">
                <el-cascader :options="costList" :props="cascaderProps" clearable
                             v-model="formBaseData.costUnitUsers" disabled
                             style="width:310px" @change="costUsersChange" ref="costCascader"></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="代理单位：" prop="agentConstructionUsers" :label-width="formlabelWidth">
                <el-cascader :options="agentList" :props="cascaderProps" clearable
                             v-model="formBaseData.agentConstructionUsers" disabled
                             style="width:310px" @change="agentUsersChange" ref="agentCascader"></el-cascader>
              </el-form-item>
            </el-col>-->

          </el-col>
          <!--v-if="formBaseData.properties === '402881e9751ff8060175206b5c1f0007'"-->
          <el-col :span="24">

          </el-col>

          <el-col :span="24">
            <el-form-item label="标段简介：" prop="intro" :label-width="formlabelWidth">
              <el-input v-model="formBaseData.intro" placeholder size="small" rows="4" type="textarea" :disabled="detailType === 'check'"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <!--api操作按钮 除去上报-->
        <!--新建和编辑的暂存上报-->
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', {flag: 1})">
            <i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
    <!-- <contractDetail :postDetail="contractDetail_postDetailData" @reloadList="getList(true)"></contractDetail> -->
  </div>
</template>

<script>

import crudSection from '@/api/buss/sectionInfo'
import msgUtil from '@/utils/msgUtil'


export default {
  name: 'info-detail',
  components: {
    // contractDetail: require('../../../contract/contract-payment/contract-payment-detail/contract-payment-detail')
    //   .default
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {

      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.detailId = value.detailId ? value.detailId : '';

      if (this.detailType != 'check') {
        this.projectId = value.params.projectId
      }

      if (this.detailType == 'build') {
        this.formBaseData = {
          project: '',
          code: '',
          coveredArea: '',
          projectSite: '',
          structureType: '',
          startTime: '',
          endTime: '',
          properties: '',
          intro: '',
          sectionLength: ''
        }

        this.title = '新增'
      } else if (this.detailType == 'check') {
        this.title = '查看项目详情'
      } else if (this.detailType == 'edit') {
        this.title = '编辑'
      } else {
        this.title = ''
      }
      // 详情的流程操作处理
      if (this.detailType !== 'build') {
        // 获取详情请求
        this.getDetail()
      }
    }
  },
  data() {
    return {
      projectId: '',
      companyMap: {
        build: {},
        cost: {},
        supervisor: {},
        agent: {},
      },
      cascaderProps: {
        multiple: true,
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
        emitPath: false,
      },
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      detailActions: [], // 当前详情的操作项
      formShow: false, // 表单展示
      formlabelWidth: '120px', // 表单左侧标题宽度
      title: '档案详情',
      activeName: 'first',
      isAudit: '',

      formBaseData: {
        name: '',
        code: '',
        coveredArea: '',
        projectSite: '',
        structureType: '',
        startTime: '',
        endTime: '',
        properties: '',
        intro: '',
        // manufacturingCost:'',
        supervisorUnit: '',
        buildUnit: '',
        // manufacturingCost:'',
        sectionLength: ''
      }, // 表单基本信息内容
      formBaseRules: {
        code: [{
          required: true,
          message: '标段号',
          trigger: 'blur'
        },],

        name: [{
          required: true,
          message: '标段名称',
          trigger: 'blur'
        },],

        properties: [{
          required: true,
          message: '管理模式',
          trigger: 'blur'
        }],
        agentConstructionUsers: [{
          required: false,
          message: '代理单位',
          trigger: 'blur'
        }],

      }, // 表单基本信息验证

      contractDetail_postDetailData: {
        show: false,
        type: 'check'
      },

      buildUnitTable: [],

    }
  },

  created() {

  },
  methods: {

    // 只允许英文加数据
    check_num() {
      this.formBaseData.code = this.formBaseData.code.replace(/[^\a-\z\A-\Z0-9]/g, '');
    },

    getDetail() {
      crudSection.getOne(this.detailId).then(res => {
        if (res.status == 1) {

          let data = res.data

          console.log(JSON.stringify(data))
          this.formBaseData.project = data.projectId
          this.formBaseData.code = data.code
          this.formBaseData.name = data.name
          this.formBaseData.coveredArea = data.coveredArea
          this.formBaseData.id = data.id
          this.formBaseData.projectSite = data.projectSite
          this.formBaseData.structureType = data.structureType
          this.formBaseData.startTime = data.startTime
          this.formBaseData.endTime = data.endTime
          this.formBaseData.intro = data.intro
          this.formBaseData.sectionLength = data.sectionLength

          this.formBaseData.supervisorUnit = data.supervisorUnit
          this.formBaseData.buildUnit = data.buildUnit

        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取详情信息失败")
      })
    },


    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      let param = {
        project: this.projectId,
        code: this.formBaseData.code,
        name: this.formBaseData.name,
        coveredArea: this.formBaseData.coveredArea,
        id: this.detailId,
        projectSite: this.formBaseData.projectSite,
        structureType: this.formBaseData.structureType,
        startTime: this.formBaseData.startTime,
        endTime: this.formBaseData.endTime,
        intro: this.formBaseData.intro,
        sectionLength: this.formBaseData.sectionLength,
      }


      if (this.detailType === 'build') {
        crudSection.submit(param).then(res => {
          if (res.status === 1) {
            this.detailId = res.data.id
            //this.isLoading = false
            this.$notify({
              title: '数据修改成功',
              type: 'success',
              duration: 1500
            })
            // 传值给父组件刷新列表
            this.$emit('reloadList')
            this.formShow = false

          } else {
            msgUtil.error2(res.data.message)
          }
        }).catch((response) => {
          this.$notify({
            title: '数据表新增失败',
            type: 'error',
            duration: 2500
          })
        }).finally((response) => {
          this.isLoading = false
        })
      } else {
        crudSection.resubmit(param).then(res => {
          if (res.status === 1) {
            this.detailId = res.data.id
            //this.isLoading = false
            this.$notify({
              title: '数据修改成功',
              type: 'success',
              duration: 1500
            })
            // 传值给父组件刷新列表
            this.$emit('reloadList')
            this.formShow = false

          } else {
            msgUtil.error2(res.data.message)
          }
        }).catch((response) => {
          this.$notify({
            title: '数据表新增失败',
            type: 'error',
            duration: 2500
          })
        }).finally((response) => {
          this.isLoading = false
        })
      }





    },

    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          // 清空表单内容
          this.formBaseData = {
            properties: '',
            code: '',
            name: '',
            coveredArea: '',
            projectSite: '',
            structureType: '',
            startTime: '',
            endTime: '',

            sectionLength: '',
            // manufacturingCost: '',
            // designCompany: '',
            intro: '',

          } // 表单基本信息内容
          // 清空文件

          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          console.log(this.formBaseData)
          // 表单验证
          this.$refs['formBaseData'].validate(valid => {
            if (valid) {
              // 再验证其他内容
              // 整理文件信息
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                /*  this.formShow = false
                  // 传值给父组件刷新列表
                  this.$emit('reloadList')*/

              })
            } else {
              this.isLoading = false
            }
          })
          break
        // 删除

      }
    },

  }
}
</script>

<style scoped lang="scss">
.el-select.half {
  width: 250px;
}

.el-select.fill {
  width: 800px;
}

.contract-ele {
  //   width: 280px;
  width: 100%;
}

.el-input .el-select {
  width: 130px;
}

.fee_add {
  color: #008fe0;
  border-color: #008fe0;
  float: right;
  margin-bottom: 10px;
}

.dialog-section-title {
  font-size: 16px;
  font-weight: bold;
}

.dialog-upload-type {
  font-size: 14px;
  color: #008fe0;
  margin-left: 50px;
}

.contractNum {
  position: absolute;
  top: 0;
  right: 20px;

  p {
    color: #a71c1c;
  }
}

.icon-add {
  position: absolute;
  top: 0;
  right: 0;
  color: #008fe0;
  font-size: 30px;
  cursor: pointer;
}

.icon-subtract {
  position: absolute;
  top: 0;
  right: 0;
  color: #008fe0;
  font-size: 30px;
  cursor: pointer;
}

.form-tip {
  font-size: 12px;
  color: #a71c1c;
}

.scoreTXT {
  color: #008fe0;
  cursor: pointer;
}

.formTitle {
  font-weight: bold;
  font-size: 16px;
}
.over-box-css {
  max-height: 700px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
